
import axios from 'axios'
import render from './index.art'


// 请求获取图书列表并渲染成列表
async function getBooks() {
  const response = await axios('http://localhost:8080/book')
  const books = response.data.data
  // console.log(books)
  // 渲染模板, 生成标签字符串
  // const html = template('lis', {books: books})
  const html = render({books})
  // 插入到ul中
  document.querySelector('ul').innerHTML = html

  // 处理删除按钮的点击
  handleClickDelBtn()
}
getBooks()

function handleClickDelBtn() {
  // 得到所有的删除按钮
  const btns = document.getElementsByName('delBtn')
  // 给每个按钮都绑定点击
  btns.forEach(btn => {
    btn.onclick = async (e) => {
      // 得到 点击的button
      const btn = e.target
      // 得到对应的id
      const id = btn.id
      // 发删除的ajax请求
      await axios.delete('http://localhost:8080/book', {params: {id}})
  
      // 成功后, 跳转到/books.html
      window.location = '/books.html'
    }
  })
}

// 此处找不到button => 页面中的button还没产生
// const btns = document.getElementsByName('delBtn')

